<template>
<div>
  <div class="title">热门推荐</div>
  <ul>
    <li class="item border-bottom" v-for="item in showList" :key="item.id">
      <img class="item-img" :src="item.imgUrl" alt="">
      <div class="item-info">
      <p class="item-title">{{item.title}}</p>
      <p class="item-desc">{{item.desc}}</p>
      <button class="item-button">查看详情</button>
      </div>
    </li>
  </ul>
  <p class="show-all" v-show="list.length > 4 && list.length != showList.length" @click="showAll">查看所有产品</p>
</div>
</template>
<script type="text/ecmascript-6">
export default{
  name:'HomeRecommend',
  data:function(){
    return {
      showList:[]
    }
  },
  props:['list'],
  watch:{
    list: function(){
      this.showList = [];
      for(var i = 0; i < this.list.length; i++){
        if(i < 4){
          this.showList.push(this.list[i]);
        }
      }
    }
  },
  methods:{
    showAll:function(){
      this.showList = this.list;
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  margin-top: 0.2rem;
  line-height:0.4rem;
  background-color: #eee;
  text-indent 0.2rem;
.item
    display:flex;
    height: 1.9rem;
    overflow:hidden;
  .item-img
    width:1.7rem;
    height:1.7rem;
    padding:0.1rem;
  .item-info
    flex: 1;
    /*这个主要用来解决ellipsis()不能出现省略号的问题*/
    min-width:0;
    padding:0.1rem;
    .item-title
      line-height:0.54rem;
      font-size 0.32rem;
      ellipsis();
    .item-desc
      line-height:0.4rem;
      color:#ccc;
      ellipsis();
    .item-button
      line-height: 0.44rem;
      margin-top: 0.16rem;
      color:#fff;
      background-color: #ff9300;
      padding: 0 0.1rem;
      border-radius 0.06rem;
.show-all
      display: block;
      padding: .2rem 0;
      color: #00afc7;
      font-size: .28rem;
      line-height: .4rem;
      text-align: center;
</style>
